<template>
  <div class="app-container">
    <!--查询条件开始-->
    <el-card class="box-card" style="margin-bottom: 10px;" >
      <div slot="header" class="clearfix">
        <span>查询条件</span>
      </div>
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
        <el-form-item label="楼栋编号" prop="id">
          <el-input
            v-model="queryParams.fId"
            placeholder="请输入楼栋编号"
            clearable
            size="small"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            maxlength="8"
            style="width:150px"
          />
        </el-form-item>
        <el-form-item label="单元编号" prop="name">
          <el-input
            v-model="queryParams.uId"
            placeholder="请输入单元编号"
            clearable
            size="small"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            maxlength="8"
            style="width:150px"
          />
        </el-form-item>
        <el-form-item label="房屋编号" prop="name">
          <el-input
            v-model="queryParams.rId"
            placeholder="请输入房屋编号"
            clearable
            size="small"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            maxlength="8"
            style="width:150px"
          />
        </el-form-item>

        <el-form-item label="房屋状态" prop="name">
          <el-select
            v-model="queryParams.state"
            placeholder="房屋状态"
            clearable
            size="small"
            style="width:150px"
          >
            <el-option v-for="room in roomState" :label="room.label" :value="room.key" :key="room.key"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getRoomList">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>

<!--表头按钮开始-->
    <el-card class="box-card" style="margin-bottom: 10px;" >
    <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <router-link :to="{'path':'/village/addHouse'}" class="el-button el-button--success el-button--mini">
          <i class="el-icon-plus"></i>
          添加房屋
        </router-link>
      </el-col>
    </el-row>
    <el-divider></el-divider>
<!--表头按钮结束-->


<!--数据表格开始-->
    <el-table :data="roomList" :header-cell-style="{ 'color': '#3D4144' }">
      <el-table-column label="楼栋-单元-房屋" align="center" >
        <template slot-scope="scope">
          {{scope.row.fid}}-{{scope.row.uid}}-{{scope.row.rid}}
        </template>
      </el-table-column>
      <el-table-column label="层数"   align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.layer}}</span>层
        </template>
      </el-table-column>
      <el-table-column label="业主名称"   align="center" prop="name">
        <template slot-scope="scope">
          <span>{{ scope.row.name === null? '无':scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话"   align="center" prop="link">
        <template slot-scope="scope">
          <span>{{ scope.row.link === null? '无':scope.row.link }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房屋面积" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.row.builtUpArea}}</span>㎡
        </template>
      </el-table-column>
      <el-table-column label="房屋状态" align="center" prop="state" >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.state === '0'">未出租或未出售</el-tag>
          <el-tag type="danger" v-if="scope.row.state === '1'">已出租或已出售</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="openUpdatePop(scope.row.rid)">修改</el-button>
          <el-button type="text" size="mini" @click="deleteRoom(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--数据表格结束-->

<!--分页控件开始-->
    <el-pagination
      v-show="total>0"
      :current-page="queryParams.pageNum"
      :page-sizes="[10,20,30]"
      :page-size="queryParams.pageSize"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </el-card>
<!--分页控件结束-->

<!--    修改弹窗-->
    <el-dialog title="修改房间" :visible.sync="updatePop" >
      <UpdateRoom :updateRoomData="updateRoomData"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updatePop = false">取 消</el-button>
        <el-button type="primary" @click="updateRoom">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {roomQuery,getRoomById,updateRoomById,deleteRoomById} from '@/api/assets/room'
import UpdateRoom from "./page/updateRoom";
import {removeUnit} from "@/api/assets/unitApi";

export default {
  name: "index",
  components:{UpdateRoom},
  data(){
    return{
      // 房屋查询条件
      queryParams:{
        fId:undefined,
        uId:undefined,
        rId:undefined,
        state:undefined,
        pageSize:1,
        pageNum:10
      },
      // 房屋状态
      roomState:[
        {'key':'0','label':'未出售'},
        {'key':'1','label':'已出售/出租'}
      ],
      // 房屋集合
      roomList:[],
      // 总数
      total:0,
      updatePop:false,
      // 修改数据
      updateRoomData:{}
    }
  },
  created() {
    this.getRoomList()
  },
  methods:{

    /**
     * 删除房屋信息
     */
    deleteRoom(room){
      this.$confirm('是否删除房屋信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(room.state === '1'){
          this.$message.error('房屋已出售或已出租,无法删除')
          return false
        }
        deleteRoomById(room.rid).then(res => {
          if(res.data){
            this.getRoomList()
            this.$message({
              type: 'success',
              message: '房屋删除成功'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    /**
     * 修改房间
     */
    updateRoom(){
      updateRoomById(this.updateRoomData).then(res => {
        if(res.data){
          this.updatePop = false
          this.getRoomList()
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
      })
    },

    /**
     * 打开修改窗体
     */
    openUpdatePop(id){
      getRoomById(id).then(res => {
        this.updateRoomData = res.data
      })
      this.updatePop = true
    },

    /**
     * 查询房屋
     */
    getRoomList(){
      const queryParams={
        fId:this.queryParams.fId,
        uId:this.queryParams.uId,
        rId:this.queryParams.rId,
        state:this.queryParams.state,
        pageSize:this.queryParams.pageSize,
        pageNum:this.queryParams.pageNum
      }
      roomQuery(queryParams).then(res => {
        this.roomList = res.data.records
        this.total = res.data.total
      })
    },

    //页面大小发生改变
    handleSizeChange(val){
      this.queryParams.pageSize = val
      this.getRoomList()
    },

    //当前页数发生改变
    handleCurrentChange(val){
      this.queryParams.pageNum = val
      this.getRoomList()
    },

  }
}
</script>

<style scoped>

</style>
